<template>
    <!-- template标签下要包含一个div标签，给这个标签一个类名container -->
    <div class="container">
        <!-- 这里使用elementplus的布局容器，上面导航栏，下面显示主要内容 -->
        <el-container class="el-container">
            <!-- 导航栏 -->
            <el-header class="el-header">
                <div class="headerleft">
                    <div class="logo"><img src="../assets/logo.png" alt="" height="100%"></div>
                    <p class="navbtn" @click="goHome"><el-icon>
                            <House />
                        </el-icon>&nbsp;首页</p>
                    <p class="navbtn" @click="goHot"><el-icon>
                            <Loading />
                        </el-icon>&nbsp;热搜</p>
                    <p class="navbtn" @click="goNotice"><el-icon>
                            <Message />
                        </el-icon>&nbsp;公告</p>
                    <p class="navbtn" @click="goTask"><el-icon>
                            <Finished />
                        </el-icon>&nbsp;任务</p>
                </div>
                <div class="headercenter">
                    __<el-icon>
                        <CollectionTag />
                    </el-icon>个人中心__
                </div>
                <div class="headerright">
                    <div class="person" @click="goPersonal">
                        <el-icon>
                            <User />
                        </el-icon>个人
                    </div>
                </div>
            </el-header>

            <!-- 主要内容 -->
            <el-main class="el-main">
                <div class="left">
                    <div class="menubtn" @click="goPersonal">
                        个人信息
                    </div>
                    <div class="menubtn" @click="goPersonalTask">
                        我的任务
                    </div>
                    <div class="menubtn">
                        我的文章
                    </div>
                    <div class="menubtn">
                        我的收藏
                    </div>
                    <div class="menubtn">
                        编辑信息
                    </div>
                    <div class="menubtn lastbtn">
                        退出登录
                    </div>
                </div>
                <el-scrollbar class="right">
                    <router-view></router-view>
                </el-scrollbar>

            </el-main>
        </el-container>
    </div>
</template>
<script setup>
import router from '../router'
import data from '../tempdata/hotsearch'
import { ref } from 'vue'
import { onMounted } from 'vue';

const hotsearchdata = ref([
    {
        "title": "这里是标题",
        "main_points": "这里是主要内容",
        "image": "https://",
        "read_num": 0
    }
])
const talkinput = ref('这里是评论内容')

onMounted(() => {
    const tmpdata = data.getHotSearchList()
    hotsearchdata.value = tmpdata.data
})

const goHome = () => {
    router.push('/')
}
const goHot = () => {
    router.push('/hotsearch')
}
const goNotice = () => {
    router.push('/notice')
}
const goTask = () => {
    router.push('/task')
}
const goPersonal = () => {
    router.push('/personal')
}
const goPersonalTask = () => {
    router.push({ name: 'personaltask' })
}
</script>

<style scoped lang="less">
.container {
    width: 100%;
    height: 100vh;

    .el-container {
        height: 100%;

        .el-header {
            background-color: #e6ded4;
            margin: 0;
            padding: 0;
            height: 6%;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .headerleft {
                height: 100%;
                display: flex;
                align-items: center;
                width: 35%;
                font-size: 20px;

                .logo {
                    height: 100%;
                    margin-left: 10px;
                    border-radius: 50%;
                    overflow: hidden;
                }

                .navbtn {
                    margin-left: 10px;
                    user-select: none;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    padding: 0 10px;

                    &:hover {
                        background-color: #d9cfc3;
                    }
                }
            }

            .headercenter {
                height: 100%;
                width: 30%;

                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                color: #00a906;
                font-weight: bold;
            }

            .headerright {
                height: 100%;
                width: 35%;
                display: flex;
                align-items: center;
                justify-content: flex-end;

                .person {
                    user-select: none;
                    height: 80%;
                    font-size: 20px;
                    display: flex;
                    align-items: center;
                    margin-right: 10px;
                    padding: 0 10px;
                    border-radius: 25px;

                    &:hover {
                        background-color: #d9cfc3;

                    }
                }
            }
        }

        .el-main {
            background-color: #f7f7f7;
            margin: 0;
            padding: 0;
            height: 94%;
            display: flex;
            justify-content: center;
            align-items: center;

            .left {
                width: 15%;
                height: 98%;
                background-color: aquamarine;
                .menubtn{
                    background-color: rgb(47, 115, 92);
                    margin: 10px 20px;
                    font-size: 18px;
                    padding: 10px;
                    text-align: center;
                    color: #ffffff;
                    border-radius: 10px;
                    &:hover{
                        background-color: #fdc68376;
                        color: #511590;
                        cursor: pointer;
                    }
                }
                .lastbtn{
                    color: red;
                }
            }

            .right {
                width: 79%;
                height: 98%;
                background-color: #ffffff;
                margin-left: 10px;
                overflow: auto;

            }
        }
    }
}


</style>